<template>
	<view>
		<!-- 搜索 -->
		<view class="py-2 seach bg-white d-flex j-center a-center">
			<view class="px-3 d-flex py-1 rounded-50 span-18 bg-light-secondary">
				<u-icon   name="search" color="" size="28"></u-icon>
				<input class="ml-2" type="text" placeholder="搜索订单" @click="sendSeach(closedList)" focus disabled />
			</view>
		</view>
		<!-- 已关闭 -->
		<scroll-view scroll-y="true" :style="{'height':scrollHeight}" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="scrolltolower"
		 refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view v-else>
				<view v-if="closedList.length<=0" :style="{'height':scrollHeight}" class="d-flex flex-column w-100 a-center j-center">
					<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
					<view class="">暂无订单</view>
				</view>
				<view v-else class="m-2 bg-white rounded-20" @click="send_detail(item)" v-for="(item,index) in closedList" :key="index">
					<view class="today_title rounded-top px-3 py-2">
						<view class="d-flex j-sb pt">
							<view class="d-flex a-center">
								<view class="mr-1 rounded-50 d-flex user_img j-center a-center">
									<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
								</view>
								<view class="">{{item.mobile}}</view>
							</view>
							<view class="">{{item.label_order_status}}</view>
						</view>
						<view class="d-flex j-sb text-light-muted">
							<view class="">{{item.create_time}}</view>
							<view class="">{{item.order_sn}}</view>
						</view>
					</view>
					<view class="p-3 rounded-bottom">
						<view class="d-flex a-center" v-if="item.goods_items.length>1">
							<view  class="mr-1" v-for="(imgItem,imgIndex) in item.goods_items" :key="index">
								<image class="today_hot rounded-20" :src="imgItem.img.url?imgItem.img.url:defaltImage" mode=""></image>
							</view>
							<view class="mr-2" v-if="item.goods_items.length>3">
								<u-icon name="more-dot-fill" color="#eaeaea" size="50"></u-icon>
							</view>
						</view>
						<view class="d-flex" v-else>
							<view class="">
								<image class="today_hot rounded-20" :src="item.goods_items[0].img.url" mode=""></image>
							</view>
							<view class="m-2">
								<view class="ellipsis">{{item.goods_items[0].name}}</view>
							</view>
						</view>
						<view class="py-1">
							<text>共{{item.goods_items[0].goods_number}}件</text><text>合计:{{item.formated_total_fee}}</text>
						</view>
					</view>
				</view>
				<view class="pb-2" v-if="!closedList.length<=0">
					<view class="" v-if="closedList.length==total"  @click="loadmores">
						<u-loadmore status="nomore" icon-type="circle" />
					</view>
					<view class="" v-else >
						<u-loadmore status="loading" icon-type="circle" />
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				closedList:"", // 已关闭列表
				scrollHeight:0, // 屏幕高度
				u_loadmore:true, // 加载中
				
				triggered: false, // 下拉刷新
				more:1, // 第几页
				count:10, // 条数
				total:0,// 总条数
				scrollTop:0,
				old: {
					scrollTop: 0
				}
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods: {
			// 下拉刷新 自定义下拉刷新控件被下拉
			 onPulling(e) {
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
			    if (this._freshing) return;
			    this._freshing = true;
			    setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
			    }, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
			    this.triggered = 'restore'; // 需要重置
			},
			// 加载数据
			getData(){
				this.$H.post("admin/orders/list",{
					type:"canceled",
					pagination:{
						count:this.count,
						page:this.more
					}
				}).then(res=>{
					this.closedList=res.data
				})
			},
			// 上拉加载函数
			scrolltolower(e){
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if(that.closedList.length==that.total){
					return
				}else{
					setTimeout(()=>{
					    that.getData()
					},1000)
				}
			},
			// 滚动时触发
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop
			},	
			// 回到顶部
			loadmores(){
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			
			// 订单搜索页
			sendSeach(item){
				uni.navigateTo({
					url:"/pagesA/order/order-today-seach?order_status_code="+item[0].order_status_code
				})

			},
			// 物流信息
			take_flow(item){
				uni.navigateTo({
					url:"/pagesA/order/order-flow?order_id="+item.order_id
				})
			},
			// 操作记录
			closed_record(item){
				uni.navigateTo({
					url:"/pagesA/order/order-record?order_id="+item.order_id
				})
			},
			// 去详情
			send_detail(item){
				uni.navigateTo({
					url:"/pagesA/order/order-today-send-detail?order_id="+item.order_id
				})
			}
		},
		onShow() {
			this.$H.post("admin/orders/list",{
					type:"canceled",
					pagination:{
						count:this.count,
						page:this.more
					}
				}).then(res=>{
				this.closedList=res.data
			})
		},
		onLoad() {
			this.$H.post("admin/orders/list",{
					type:"canceled",
					pagination:{
						count:this.count,
						page:this.more
					}
				}).then(res=>{
				this.closedList=res.data
				this.u_loadmore=false 
				this.total=res.paginated.total
			})	
			// 下拉刷新
			this._freshing = false;
		}
	}
</script>

<style>
	.user_img{
		width: 40upx;
		height: 40upx;
		background-color: #ffd1d0;
	}
	.today_title{
		background-color: #f6efef;
	}
	.today_hot{
		width: 150upx;
		height: 150upx;
	}
</style>
